<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>产品详情页面</title>
		<link rel="stylesheet" href="./font/iconfont.css">
		<link rel="stylesheet" href="./css/base.css">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/good-detail.css">
		<link rel="shortcut icon" href="yangyaru.ico" type="image/x-icon">
	</head>
	<body>
		<section class="shortcut">
			<div class="container">
				<div class="fl">
					<ul>
						<li>品优购欢迎您！&nbsp;</li>
						<li>
							<a href="#">请登录&nbsp;</a><a class="color_red" href="#">&nbsp;免费注册</a>
						</li>
					</ul>

				</div>
				<div class="fr">
					<ul>
						<li><a href="#">我的订单</a></li>
						<li><a href="#">我的品优购<span class="iconfont icon-arrow-down"></span></a></li>
						<li><a href="#">品优购会员</a></li>
						<li><a href="#">企业采购</a></li>
						<li><a href="#">关于品优购<span class="iconfont icon-arrow-down"></span></a></li>
						<li><a href="#">客户服务<span class="iconfont icon-arrow-down"></span></a></li>
						<li><a href="#">网站导航<span class="iconfont icon-arrow-down"></span></a></li>
					</ul>
				</div>
			</div>
		</section>
		<header class="header container">
			<div class="logo">
				<h1>
					<a href="index.html" title="品优购商城">品优购商城</a>
				</h1>
			</div>
			<div class="seearch">
				<input type="search" placeholder="语言开发">
				<button type="button">搜索</button>
			</div>
			<div class="hotwords">
				<ul>
					<li><a class="color_red" href="#">优惠购首发</a></li>
					<li><a href="#">亿元优惠</a></li>
					<li><a href="#">9.9团购</a></li>
					<li><a href="#">美满99减30</a></li>
					<li><a href="#">办公用品</a></li>
					<li><a href="#">电脑</a></li>
					<li><a href="#">通信</a></li>
				</ul>
			</div>
			<div class="cart">
				我的购物车
				<span class="my_cart_count">88</span>
			</div>
		</header>
		<nav class="nav-tabs ">
			<div class="container clearfix">
				<div class="fl side-nav">
					<div class="title">
						全部商品分类
					</div>
					<ul class="side_nav_cate" style="display: none;">
						<li><a href="#">家用电器</a></li>
						<li><a href="#">手机、数码、通信</a></li>
						<li><a href="#">电脑、办公</a></li>
						<li><a href="#">家居、家具、家装、厨具</a></li>
						<li><a href="#">男装、女装、童装、内衣</a></li>
						<li><a href="#">个户化妆、清洁用品、宠物</a></li>
						<li><a href="#">鞋靴、箱包、珠宝、奢侈品</a></li>
						<li><a href="#">运动户外、钟表</a></li>
						<li><a href="#">汽车、汽车用品</a></li>
						<li><a href="#">母婴、玩具乐器</a></li>
						<li><a href="#">食品、酒类、生鲜、特产</a></li>
						<li><a href="#">医药保健</a></li>
						<li class="active"><a href="#">图书、音像、电子书</a></li>
						<li><a href="#">彩票、旅行、充值、票务</a></li>
						<li><a href="#">理财、众筹、白条、保险</a></li>
					</ul>
				</div>
				<div class="fl">
					<ul class="nav-links">
						<li><a href="#">服装城</a></li>
						<li><a href="#">美妆馆</a></li>
						<li><a href="#">传智超市</a></li>
						<li><a href="#">全球购</a></li>
						<li><a href="#">闪购</a></li>
						<li><a href="#">团购</a></li>
						<li><a href="#">拍卖</a></li>
						<li><a href="#">有趣</a></li>
					</ul>
				</div>
			</div>
		</nav>
		<div class="bread-tabs container clearfix">
			<ul class="clearfix">
				<li><a href="#">手机、数码、通讯</a></li>
				<li><a href="#">手机</a></li>
				<li><a href="#">Apple苹果</a></li>
				<li><a href="#">iphone 6S Plus系类 </a></li>
			</ul>
		</div>
		<div class="good-info container clearfix">
			<div class="fl img-preview">
				<div class="preview-big">
					<img src="upload/good-item-pic.png">
				</div>
				<div class="preview-small">
					<a href="#" class="iconfont icon-arrow-left"></a>
					<ul>
						<li><img src="upload/preview-small.png"></li>
						<li><img src="upload/preview-small.png"></li>
						<li><img src="upload/preview-small.png"></li>
						<li><img src="upload/preview-small.png"></li>
						<li><img src="upload/preview-small.png"></li>
					</ul>
					<a href="#" class="iconfont icon-arrow-right"></a>
				</div>
				<div class="good-desc">
					<span>商品编号：<span>0468256644</span></span>
					<span><i class="iconfont icon-share"></i>分享</span>
					<span><i class="iconfont icon-favorites-fill"></i>关注</span>
					<span><input type="checkbox" name="" value="" />对比</span>
					<!-- 疑问点？怎么调整checkbox的宽高 -->
				</div>
			</div>
			<div class="fl good-sku">
				<h3>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h3>
				<p>推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
				<div class="price">
					<div class="sale_box clearfix">
						<span class="fl title">价格</span>
						<span class="fl text color_red">￥<span style="font-size: 24px;">5299.00</span></span>
						<span class="fl text color_red">降价通知</span>
						<span class="fr text">累计评价 <small style="color: #1474af;">612188</small></span>
					</div>
					<div class="hot_sale_box clearfix">
						<span class="fl title">促销</span>
						<span class="fl text"><span
								class="add-sale">加价购</span>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
							购热销商品 详情 》
						</span>
					</div>
				</div>
				<div class="goods-sku-item clearfix">
					<span class="fl title">支持</span>
					<span class="fl text">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</span>
				</div>
				<div class="goods-sku-item clearfix">
					<span class="fl title">配送至</span>
					<span class="fl text">
						<select name="">
							<option value="">北京海淀区中关</option>
						</select>
						<span>有货</span>
						支持
						99元免运费
						|
						货到付款
						|
						211限时达
						<i class="iconfont icon-arrow-down"></i><br>
						由
						<span>自营</span>
						发货，并提供售后服务。11:00前完成下单，预计
						<span>今天</span>
						（<span>08月10日</span>）
						送达
					</span>
				</div>
				<div class="goods-sku-item clearfix">
					<span class="fl title">选择颜色</span>
					<span class="fl text color-type">
						<button type="button">金色</button>
						<button type="button">银色</button>
						<button type="button">黑色</button>
						<button type="button" class="active">玫瑰金</button>
					</span>
				</div>
				<div class="goods-sku-item clearfix">
					<span class="fl title">选择容量</span>
					<span class="fl text size-type">
						<button type="button">64G</button>
						<button type="button" class="active">128G</button>
						<button type="button">256G</button>
						<button type="button">512G</button>
					</span>
				</div>
				<div class="goods-sku-item clearfix">
					<span class="fl title">购买方式</span>
					<span class="fl text sale-type">
						<button type="button" class="active">官方标配</button>
						<button type="button">移动优惠购</button>
						<button type="button">电信优惠购</button>
					</span>
				</div>
				<div class="goods-sku-item clearfix">
					<span class="fl title">套装</span>
					<span class="fl text sale-type">
						<button type="button" class="active">保护套装</button>
						<button type="button">充电套装</button>
					</span>
				</div>
				<div class="goods-sku-item sale-count">
					<span class="fl title">
						<button type="button" class="sale-count">1</button>
					</span>
					<span class="fl text">
						<button type="button" class="add-cart">加入购物车</button>
					</span>
				</div>
			</div>
		</div>
		<div class="good-detail container clearfix">
			<div class="fl good-recom">
				<div class="recom-tab-list">
					<ul>
						<li><a href="#">相关分类</a></li>
						<li class="active"><a href="#">推荐品牌</a></li>
					</ul>
				</div>
				<div class="recom-tab-con tab-cate">
					<ul class="clearfix">
						<li>
							<a>手机</a>
							<a>手机壳</a>
						</li>
						<li>
							<a>内存卡</a>
							<a>贴膜</a>
						</li>
						<li>
							<a>移动电源</a>
							<a>笔记本</a>
						</li>
					</ul>
				</div>
				<div class="recom-tab-con tab-recom">
					<p class="fontsize14">购买了此商品的用户还买了</p>
					<ul>
						<li>
							<a href="#">
								<img src="./upload/good-item-pic.png" alt="">
								<p>购买了此商品的用户还买了购买了此商品的用户还买了</p>
								<p style="text-align: left;">￥49</p>
								<button type="button" class="add-cart">加入购物车</button>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="./upload/good-item-pic.png" alt="">
								<p>购买了此商品的用户还买了购买了此商品的用户还买了</p>
								<p style="text-align: left;">￥49</p>
								<button type="button" class="add-cart">加入购物车</button>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="./upload/good-item-pic.png" alt="">
								<p>购买了此商品的用户还买了购买了此商品的用户还买了</p>
								<p style="text-align: left;">￥49</p>
								<button type="button" class="add-cart">加入购物车</button>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="./upload/good-item-pic.png" alt="">
								<p>购买了此商品的用户还买了购买了此商品的用户还买了</p>
								<p style="text-align: left;">￥49</p>
								<button type="button" class="add-cart">加入购物车</button>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="./upload/good-item-pic.png" alt="">
								<p>购买了此商品的用户还买了购买了此商品的用户还买了</p>
								<p style="text-align: left;">￥49</p>
								<button type="button" class="add-cart">加入购物车</button>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="fl good-detail-img" style="margin-left: 10px;">
				<div class="choose-dapei">
					<div class="title">
						<h5 class="active">选择搭配</h5>
					</div>
					<div class="content clearfix">
						<div class="fl" style="width: 808px;height: 263px;">
							<ul class="dapei-list-text clearfix">
								<li><a href="#">精品</a></li>
								<li><a href="#">iphone配件</a></li>
								<li><a href="#">蓝牙耳机</a></li>
								<li><a href="#">自拍杆</a></li>
								<li><a href="#">数据线</a></li>
								<li><a href="#">其他手机配件</a></li>
							</ul>
							<div class="clearfix">
								<div class="fl now-product" style="text-align: center;">
									<div class="img">
										<img src="./upload/good-item-pic.png" alt="" style="width: 100%;">
									</div>
									<p class="price">￥5200</p>
								</div>
								<div class="fr dapei-products">
									<ul class="dapei-list-img clearfix">
										<li>
											<div class="img">
												<img src="upload/like_pic.png" alt="">
											</div>
											<p class="dec">Feless费勒斯VRFeless费勒斯VRFeless费勒斯VR</p>
											<p class="checked-box" style="height: 30px;">
												<input type="checkbox" name="" id="dapei-1" value="" />
												<label for="dapei-1 color_red">￥39</label>
											</p>
										</li>
										<li>
											<div class="img">
												<img src="upload/like_pic.png" alt="">
											</div>
											<p class="dec">Feless费勒斯VRFeless费勒斯VRFeless费勒斯VR</p>
											<p class="checked-box" style="height: 30px;">
												<input type="checkbox" name="" id="dapei-1" value="" />
												<label for="dapei-1 color_red">￥39</label>
											</p>
										</li>
										<li>
											<div class="img">
												<img src="upload/like_pic.png" alt="">
											</div>
											<p class="dec">Feless费勒斯费勒斯VRFeless费勒斯VRFeless费勒斯VR</p>
											<p class="checked-box" style="height: 30px;">
												<input type="checkbox" name="" id="dapei-1" value="" />
												<label for="dapei-1 color_red">￥39</label>
											</p>
										</li>
										<li>
											<div class="img">
												<img src="upload/like_pic.png" alt="">
											</div>
											<p class="dec">Feless费勒斯费勒斯VRFeless费勒斯VRFeless费勒斯VR</p>
											<p class="checked-box" style="height: 30px;">
												<input type="checkbox" name="" id="dapei-1" value="" />
												<label for="dapei-1 color_red">￥39</label>
											</p>
										</li>
									</ul>
									<a href="#" class="recom-next"><i class="iconfont icon-arrow-right"></i></a>
								</div>
							</div>
						</div>
						<div class="fr" style="width: 169px;border-left: 1px solid #EDEDED;height: 263px;">
							<div class="dapei-addcart text-align-left">
								<p class="">已选够 <span>0</span> 件搭配</p>
								<p class=""><b>套餐价</b></p>
								<p class="color_red">￥<span class="fontsize16">5299.00</span> </p>
								<div>
									<button type="button" class="add-cart">加入购物车</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="choose-detail">
					<div class="title">
						<h5 class="active">商品介绍</h5>
						<h5>规格与包装</h5>
						<h5>售后保障</h5>
						<h5>商品评价（50000）</h5>
						<h5>手机社区</h5>
					</div>
					<div class="content" style="border: none;">
						<table class="detail-info" border="0" cellspacing="10" cellpadding="0">
							<tr>
								<th>分辨率：</th>
								<td>1920*1080(FHD)</td>
							</tr>
							<tr>
								<th>后置摄像头：</th>
								<td>1200万像素</td>
							</tr>
							<tr>
								<th>前置摄像头：</th>
								<td>500万像素</td>
							</tr>
							<tr>
								<th>核 数：</th>
								<td>其他</td>
							</tr>
							<tr>
								<th>热点：</th>
								<td>指纹识别，Apple Pay，金属机身，拍照神器</td>
							</tr>
							<tr>
								<th></th>
								<td align="right" style="color: #333;">查看更多参数<i class="iconfont icon-arrow-down"></i>
								</td>
							</tr>
						</table>
						<img src="./upload/detail-info-pic1.png" alt="">
						<img src="./upload/detail-info-pic2.png" alt="">
						<img src="./upload/detail-info-pic3.png" alt="">
					</div>
				</div>
			</div>
		</div>
		<div class="choose-like container">
			<div class="title">
				<h5>猜你喜欢</h5>
			</div>
			<div class="content" style="padding: 30px;">
				<ul class="clearfix">
					<li>
						<a href="#">
							<img src="upload/guess-like-pic1.png">
							<div class="guess-like-desc">
								DELL 戴尔Ins 15MR-7528SS 15英寸 银色 笔记
							</div>
							<div class="price color_red">
								￥
								<span class="fontsize16">3699</span>
							</div>
							<div class="guess-like-comment">
								已有<span>5</span>人评论
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="upload/guess-like-pic1.png">
							<div class="guess-like-desc">
								DELL 戴尔Ins 15MR-7528SS 15英寸 银色 笔记
							</div>
							<div class="price color_red">
								￥
								<span class="fontsize16">3699</span>
							</div>
							<div class="guess-like-comment">
								已有<span>5</span>人评论
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="upload/guess-like-pic1.png">
							<div class="guess-like-desc">
								DELL 戴尔Ins 15MR-7528SS 15英寸 银色 笔记
							</div>
							<div class="price color_red">
								￥
								<span class="fontsize16">3699</span>
							</div>
							<div class="guess-like-comment">
								已有<span>5</span>人评论
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="upload/guess-like-pic1.png">
							<div class="guess-like-desc">
								DELL 戴尔Ins 15MR-7528SS 15英寸 银色 笔记
							</div>
							<div class="price color_red">
								￥
								<span class="fontsize16">3699</span>
							</div>
							<div class="guess-like-comment">
								已有<span>5</span>人评论
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="upload/guess-like-pic1.png">
							<div class="guess-like-desc">
								DELL 戴尔Ins 15MR-7528SS 15英寸 银色 笔记
							</div>
							<div class="price color_red">
								￥
								<span class="fontsize16">3699</span>
							</div>
							<div class="guess-like-comment">
								已有<span>5</span>人评论
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<footer class="footer">
			<div class="container">
				<div class="mod_server">
					<ul>
						<li>
							<div class="img"></div>
							<div class="service_txt">
								<h4>保证正品</h4>
								<p>正品保障 提供发票</p>
							</div>
						</li>
						<li>
							<div class="img"></div>
							<div class="service_txt">
								<h4>保证正品</h4>
								<p>正品保障 提供发票</p>
							</div>
						</li>
						<li>
							<div class="img"></div>
							<div class="service_txt">
								<h4>保证正品</h4>
								<p>正品保障 提供发票</p>
							</div>
						</li>
						<li>
							<div class="img"></div>
							<div class="service_txt">
								<h4>保证正品</h4>
								<p>正品保障 提供发票</p>
							</div>
						</li>
						<li>
							<div class="img"></div>
							<div class="service_txt">
								<h4>保证正品</h4>
								<p>正品保障 提供发票</p>
							</div>
						</li>
					</ul>
				</div>
				<div class="mod_help clearfix">
					<dl>
						<dt>服务指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行/团购</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl>
						<dt>服务指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行/团购</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl>
						<dt>服务指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行/团购</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl>
						<dt>服务指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行/团购</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl>
						<dt>服务指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行/团购</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl>
						<dt>帮助中心</dt>
						<dd><a href="#"><img src="./images/app.png" alt=""></a></dd>
						<dd><a href="#">品优购客户端</a></dd>
					</dl>
				</div>
				<div class="mod_copyright">
					<div class="links">
						<ul>
							<li><a href="#">关于我们</a></li>
							<li><a href="#">联系我们</a></li>
							<li><a href="#">联系客服</a></li>
							<li><a href="#">商家入驻</a></li>
							<li><a href="#">营销中心</a></li>
							<li><a href="#">手机品优购</a></li>
							<li><a href="#">友情链接</a></li>
							<li><a href="#">销售联盟</a></li>
							<li><a href="#">品优购社区</a></li>
							<li><a href="#">品优购公益</a></li>
							<li><a href="#">English Site </a></li>
							<li><a href="#">Contact U </a></li>
						</ul>
					</div>
					<div class="contact">
						地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
					</div>
					<div class="address">
						京ICP备08001421号京公网安备110108007702
					</div>
				</div>
			</div>
		</footer>
	</body>
</html>
